<div
  *ngIf="!src; else img"
  class="circle common-icon"
  [ngStyle]="{
    width: size === 0 ? '' : size + 'px',
    height: size === 0 ? '' : size + 'px',
    minWidth: size + 'px',
    minHeight: size + 'px',
    borderRadius: radius + 'px',
    background: backgroundColor
  }"
>
  {{ firstLetter }}
</div>

<ng-template #img>
  <img
    *ngIf="!isError"
    [src]="src"
    class="icon common-icon"
    [ngStyle]="{
      width: size === 0 ? '' : size + 'px',
      height: size === 0 ? '' : size + 'px',
      minWidth: size + 'px',
      minHeight: size + 'px',
      borderRadius: radius + 'px'
    }"
    draggable="false"
    loading="lazy"
    [alt]="firstLetter"
    (error)="onError()"
  />

  <div
    *ngIf="isError"
    class="circle common-icon"
    [ngStyle]="{
      width: size === 0 ? '' : size + 'px',
      height: size === 0 ? '' : size + 'px',
      minWidth: size + 'px',
      minHeight: size + 'px',
      borderRadius: radius + 'px',
      background: backgroundColor
    }"
  >
    {{ firstLetter }}
  </div>
</ng-template>
